<template>
	<view class="page home pt10 bgf7 boxS">
		<view class="bgff aliC fs13 flex flexC flexB mx10">
			<view class="flex1 py12">
				<view>营业额</view>
				<view class="bold6 mt2 fs16">{{amount}}</view>
			</view>
			<view class="flex1 py12">
				<view>有效订单</view>
				<view class="bold6 mt2 fs16">{{order}}</view>
			</view>
			<view class="flex1 py12">
				<view>商品总数</view>
				<view class="bold6 mt2 fs16">{{product}}</view>
			</view>
		</view>
		<view class="tabs flex flexC c00 fs14 px10 pt6 mx10">
			<text class="m8 pb4" 
				:class="index==currentTab?'active':''" 
				v-for="(item,index) in tabs" :key="index" 
				@click="switchTab(index)">{{item}}</text>
		</view>
		<view v-if="currentTab == 0" class="flex mt10 mx10 bgff">
			<scroll-view scroll-y class="w-5 tabbox list" v-if="cateList.length>0">
				<view v-for="(item, index) in cateList" 
				:key="index" class="aliC tab" 
				:class="index == currtab ? 'active':''" 
				@click="tabcur(index)">
					<text class="flex1">{{item}}</text>
				</view>
			</scroll-view>
			<scroll-view v-if="productList.length>0" l-y @scrolltolower="nextPage" class="list" >
				<view class="pb16">
					<view class="item flex flexC p16" v-for="item in productList">
						<image class="cover r6" src="/static/img/item_2.png" mode="aspectFill"></image>
						<view class="flex1 ml18">
							<view class="fs12 ellipsis2">情趣内衣产品图情趣内衣产品图情趣内衣产品图趣内衣产品图</view>
							<view class="fs10 c85"><text>月售1</text></view>
							<view><text class="tag cfd fs10 r40 px8">4折</text></view>
							<view class="cfd fs14 bold6 flex flexC flexB">
								<text>￥12.2</text>
								<text class="add r50 fs18 cff">+</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-else class="bgf7 px10" >
			<view class="tabbox2 flex flexC flexB c00 fs14 bgff p10">
				<text @click="clickStatusTab(index)" class="px6 py4 r3" :class="index==currentIndex?'active':''" v-for="(item,index) in tabList" :key="index" >{{item}}</text>
			</view>
			<scroll-view  scroll-y @scrolltolower="nextPage" class="list2">
				<view class="item bgff mb10" v-for="item in orderList">
					<view class="topbox flex flexC p16">
						<image class="logo r50" src="/static/img/item_2.png" mode="aspectFill"></image>
						<view class="cfd fs26 ml4 bold6">4</view>
						<view class="flex1 ml18">
							<view class="fs13 bold6 ellipsis2 mb2">12-25  20:55已完成</view>
							<view class="fs14 c85"><text>蜜小友成人情趣用品#41</text></view>
						</view>
						<text class="arrowR"></text>
					</view>
					<view class="p20">
						<view>刘(**)</view>
						<view class="flex flexC c85 mt6">
							<view class="flex1 fs13">
								<view class="mb4">13487589019</view>
								<view>152****3010</view>
							</view>
							<view class="icon">
								<image class="pl18" src="/static/img/icon/kf.png" mode="aspectFill"></image>
								<image class="pl18" src="/static/img/icon/kf.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="py12 borb">肯德基(沐风路店)</view>
						<view class="flex flexC py16">
							<view class="flex1">
								<view class="fs13 bold6 ellipsis2">12-25  20:55已完成</view>
								<view class="fs14 c85 mt6">[倍耐力]悲哀里外用延时喷剂二代15ml/瓶/盒15ml/瓶/盒</view>
							</view>
							<text class="arrowR"></text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup type="bottom" ref="popup">
			<view class="fs12 bgff p16 c33 popup">
				<view class="fs16 bold6 c00">共1件商品</view>
				<scroll-view scroll-y @scrolltolower="nextPage" class="list3">
					<view class="pb16">
						<view class="item flex flexC py16" v-for="item in 15">
							<image class="cover r6" src="/static/img/item_2.png" mode="aspectFill"></image>
							<view class="flex1 ml18 ">
								<view class="ellipsis2">情趣内衣产品图情趣内衣产品图情趣内衣产品图趣内衣产品图</view>
								<view class="flex flexC flexB">
									<text>x1</text>
									<text>12.2元</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="fs14 c00 bold6 mt16 mb10">订单赠品</view>
				<view class="">满25元赠送随机小礼品一份</view>
			</view>
		</uni-popup>
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['新订单','待接单','待取货','配送中','退款','已完成'],
				currentIndex: 0,
				tabs: ['商品库','在线订单'],
				currentTab: 1,
				keyword:'',
				currtab:0,
				list:['分类1','分类2'],
				currentCate:null,
				subList:[],
				amount:0,
				order:0,
				product:0,
				productList:[],
				orderList:[],
				cateList:[]
			}
		},
		onLoad() {
			uni.hideHomeButton();
			
			// this.$nextTick(() => {
			// 	this.$refs.popup.open();
			// });
	
		},
		onShow() {
			this.getIndex();
		},

		methods: {
			
			clickStatusTab(index){
				this.currentIndex = index;
			},
			switchTab(index){
				this.currentTab = index;
			},
			tabcur(index){
				this.currtab = index;
			},
			
			getCate(){
				
				
				let param ={
					shop_id:uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.mtCate(param).then(res => {
				
					if (res.code == 1) {
					
						if(res.data == null){
							
						}
					
					} else {
						
					}
				
				})
			},
			
			getProductList(){
				
				
				let param ={
					shop_id:uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.mtProduct(param).then(res => {
				
					if (res.code == 1) {
					
				
					
					} else {
						
					}
				
				})
			},
			
			getOrderList(){
				
				
				let param ={
					shop_id:uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.mtOrderList(param).then(res => {
				
					if (res.code == 1) {
					
				
					
					} else {
						
					}
				
				})
			},
			
			
			getIndex(){
				
				
				let param ={
					shop_id:uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.mtIndex(param).then(res => {
				
					if (res.code == 1) {
					
						that.amount = res.data.amount;
						that.order = res.data.order;
						that.product = res.data.product;
						
					
					} else {
						
					}
				
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100vh;
		.popup {
			border-radius: 28rpx 28rpx 0 0;
			.list3 {
				max-height: 65vh;
				.cover {
					width: 168rpx;
					height: 168rpx;
				}
			}
		}
		.list2 {
			height: calc(100vh - 348rpx);
			.item {
				.topbox {
					background-color: #FFC0DE;
					.logo {
						width: 36rpx;
						height: 36rpx;
					}
				}
				.icon {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.tabs {
			.active {font-weight: 600; border-bottom: 4rpx solid #FD449B;}
		}
		.list {
			height: calc(100vh - 248rpx);
			.item {
				box-sizing: border-box;
				.cover {
					width: 168rpx;
					height: 168rpx;
				}
				.tag {
					border: 2rpx solid #FD449B;
				}
				.add {
					width: 40rpx;
					height: 40rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #FD449B;
				}
			}
		}
		.bgf7{background-color: #F7F7F7;}

		.tabbox{
			background-color:#FFF;
			border-right: 2rpx solid #D1D1D1;
			.tab{height: 106rpx;line-height: 106rpx;position: relative;
				&.active {
					&::before {
						content: '';
						width: 6rpx;
						height: 40rpx;
						background-color: #FD449B;
						position: absolute;
						top: calc(50% - 20rpx);
						left: 0;
					}
				}
			}
		}
		.tabbox2 {
			>text {
				border: 2rpx solid #A4ADB3;
			}
			.active{
				color: #fff;
				position: relative;
				border:0rpx;
				background-color: #FD449B;
			}
		}
	}
</style>
